import React, { Component } from "react";
import { Form, Input, Button, Upload, Icon, Row, Col, Radio, message } from "antd";
import { ChromePicker } from "react-color";
import styles from "./index.less";
import { webSettingInfo, saveWebSetting } from "@/services/geographic";
import { formatMessage } from 'umi-plugin-react/locale';
const CustomRadio = ({
	id = null,
	name = null,
	value = null,
	content = null,
	labelStyle = {},
	assistStyle = {},
	onChange = null,
}) => {
	const handleChange = (e) => {
		if (onChange) {
			onChange(value);
		}
	};

	return (
		<label className={styles.labelWrapper} style={labelStyle} onChange={handleChange}>
			<input type='radio' id={id} name={name} value={value} />
			<div>
				<span>{content}</span>

				{id == 1 ? <span className={styles.style1}></span> : null}
				{id == 2 ? <span className={styles.style2}></span> : null}
				{id == 3 ? <span className={styles.style3}></span> : null}
			</div>
		</label>
	);
};

class AppearanceSettings extends Component {
	constructor(props) {
		super(props);
		this.state = {
			headPath: "",
			userHeadImg: "",
			entranceWebImg: "",
			displayColorPicker: false,
			webWinColor: "#169bd5",
			winLogo: "",
			entranceLogo: "",
			id: "",
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
		this.getSiteInfo();
	}

	getSiteInfo = async () => {
		const { robotId, form } = this.props;
		const res = await webSettingInfo({ robotId });
		if (!res.winLogo) {
			res.winLogo = "/robotConfigImg/robot.png";
		}
		if (!res.headPath) {
			res.headPath = "/robotConfigImg/robot.png";
		}
		if (!res.userHeadImg) {
			res.userHeadImg = "/robotConfigImg/user.png";
		}
		if (!res.entranceH5Img) {
			res.entranceH5Img = "/robotConfigImg/robot.png";
		}
		if (!res.entranceWebImg) {
			res.entranceWebImg = "/robotConfigImg/kefu.png";
		}

		this.setState(
			{
				headPath: res.headPath,
				userHeadImg: res.userHeadImg,
				entranceWebImg: res.entranceWebImg,
				webWinColor: res.webWinColor,
				winLogo: res.winLogo,
				entranceLogo: res.winLogo,
				id: res.id,
			},
			() => {
				form.setFieldsValue({ winTitle: res.winTitle, });
			}
		);
	};

	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields(async (err, values) => {
			if (!err) {
				console.log("Received values of form: ", values);
				const { headPath, userHeadImg, entranceWebImg, webWinColor, id } = this.state;
				const res = await saveWebSetting({
					...values,
					robotId: this.props.robotId,
					headPath,
					userHeadImg,
					entranceWebImg,
					webWinColor,
					id: this.state.id,
				});
				message.info(res.message);
			}
		});
	};

	normFile = (e) => {
		if (Array.isArray(e)) {
			return e;
		}
		return e && e.fileList;
	};

	handleChangeImage = (file, type) => {
		if (file.file.status === "done") {
			this.setState({ [type]: file.file.response.url, });
		}
	};

	/**
	 * 上传图片前判断
	 * @returns {*}
	 */
	beforeUpload = (file) => {
		let b = /\.(png|jpg|gif)$/;
		let a = file.name.toLowerCase();

		const pig = b.test(a);
		const isJPG = file.type;
		const isLt2M = file.size / 1024 / 1024 < 2;

		if (!pig) {
			if (!isLt2M) {
				message.error("请上传小于2M的图片");
			} else {
				message.error("请上传图片格式");
			}
		} else {
			if (!isLt2M) {
				message.error("请上传小于2M的图片");
			}
		};
		return isJPG && isLt2M && pig;
	};

	handleColorPick = () => {
		let { displayColorPicker } = this.state;
		this.setState({ displayColorPicker: !displayColorPicker, });
	};

	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 2 },
			wrapperCol: { span: 20 },
		};
		const tailFormItemLayout = {
			wrapperCol: {
				xs: {
					span: 24,
					offset: 0,
				},
				sm: {
					span: 22,
					offset: 2,
				},
			},
		};
		const { headPath, userHeadImg, entranceWebImg, displayColorPicker, webWinColor, winLogo, entranceLogo } = this.state;

		return (
			<div className={styles.appearance_settings}>
				<Form {...formItemLayout} onSubmit={this.handleSubmit}>
					<Form.Item label='窗口标题'>
						{getFieldDecorator("winTitle", {
							rules: [{ required: true, message: "请输入窗口标题!" }],
						})(<Input placeholder='请输入窗口标题' style={{ width: 300 }} />)}
					</Form.Item>
					<Form.Item label='机器人头像' extra='机器人接待时显示的客服头像大小不超过1MB，推荐图片尺寸50×50px'>
						{getFieldDecorator("headPath", { valuePropName: "url", getValueFromEvent: this.normFile, })(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "headPath")}
								accept='.png,.jpg'
							>
								<img src={headPath} alt='file' className={styles.avator} />
								<Button size={"small"}>选择文件</Button>
							</Upload>
						)}
					</Form.Item>
					<Form.Item label='用户头像' extra='机器人接待时显示的客户头像大小不超过1MB，推荐图片尺寸50×50px'>
						{getFieldDecorator("userHeadImg", { valuePropName: "fileList", getValueFromEvent: this.normFile, })(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "userHeadImg")}
								accept='.png,.jpg'
							>
								<img src={userHeadImg} alt='file' className={styles.avator} />
								<Button size={"small"}>选择文件</Button>
							</Upload>
						)}
					</Form.Item>
					<Form.Item label='客服头像' extra='机器人接待时显示的客服头像大小不超过1MB，推荐图片尺寸50×50px'>
						{getFieldDecorator("entranceWebImg", { valuePropName: "entranceWebImg", getValueFromEvent: this.normFile, })(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "entranceWebImg")}
								accept='.png,.jpg'
							>
								<img src={entranceWebImg} alt='file' className={styles.avator} />
								<Button size={"small"}>选择文件</Button>
							</Upload>
						)}
					</Form.Item>
					{/* <Form.Item label='窗口Logo' extra='标题栏左侧Logo图，大小不超过1MB，推荐图片尺寸50×50px'>
						{getFieldDecorator("winLogo", {valuePropName: "winLogo",getValueFromEvent: this.normFile,})(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "winLogo")}
								accept='.png,.jpg'
							>
								<img src={winLogo} alt='file' className={styles.avator} />
								<Button size={"small"}>选择文件</Button>
							</Upload>
						)}
					</Form.Item> */}
					{/* <Form.Item label='入口图标' extra='标题栏左侧Logo图，大小不超过1MB，推荐图片尺寸50×50px'>
						{getFieldDecorator("entranceLogo", {valuePropName: "entranceLogo",getValueFromEvent: this.normFile,})(
							<Upload
								name='file'
								listType='picture'
								showUploadList={false}
								action='/cloud/file/upload'
								beforeUpload={this.beforeUpload}
								onChange={(info) => this.handleChangeImage(info, "entranceLogo")}
								accept='.png,.jpg'
							>
								<img src={entranceLogo} alt='file' className={styles.avator} />
								<Button size={"small"}>选择文件</Button>
							</Upload>
						)}
					</Form.Item> */}
					<Form.Item label='主题色'>
						<div className={styles.flexColor}>
							<div className={styles.winColorBox}>
								<div style={{ background: webWinColor }} className={styles.webWinColor} onClick={this.handleColorPick} />
								<span>{webWinColor}</span>
							</div>
							{displayColorPicker ? (
								<div style={{ position: "relative", zIndex: "2" }}>
									<div style={{ position: "fixed", top: "0px", right: "0px", bottom: "0px", left: "0px", }} onClick={this.handleColorPick} />
									<ChromePicker color={webWinColor} onChangeComplete={(color) => this.setState({ webWinColor: color.hex, })} />
								</div>
							) : null}
						</div>
					</Form.Item>
					<Form.Item label='气泡样式'>
						{getFieldDecorator("style", { rules: [{ required: true, message: "请选择气泡样式" }], })(
							<div>
								<CustomRadio {...{ id: "1", name: "style", value: "style1", content: "水滴", }} />
								<CustomRadio {...{ id: "2", name: "style", value: "style2", content: "气泡", }} />
								<CustomRadio {...{ id: "3", name: "style", value: "style3", content: "方块", }} />
							</div>
						)}
					</Form.Item>
					<Form.Item {...tailFormItemLayout}>
						<Button type='primary' htmlType='submit'>{formatMessage({ id: 'appearanceSettings.left.save' })}</Button>
					</Form.Item>
				</Form>
			</div>
		);
	}
}

export default Form.create()(AppearanceSettings);
